<div class="fixbar" [class.openFixbar]="open">
  <div
    class="common-show wrapper dark-bg dark-border-color dark-action-hover"
    nz-dropdown
    [nzDropdownMenu]="menu"
    nzPlacement="topLeft"
    *ngIf="settings.showThemeToggle"
  >
    <img src="assets/img/theme.svg" />
  </div>
  <nz-dropdown-menu #menu="nzDropdownMenu">
    <ul nz-menu nzSelectable>
      <li
        nz-menu-item
        *ngFor="let themeItem of themeList"
        (click)="toggleTheme(themeItem)"
      >
        {{ themeItem.name }}
      </li>
    </ul>
  </nz-dropdown-menu>

  <div
    class="common-show wrapper dark-bg dark-border-color dark-action-hover"
    (click)="handleSync()"
    *ngIf="isLogin && !isSelfDevelop"
  >
    <img class="iconfont" src="assets/img/sync.svg" />
  </div>

  <div
    class="common-show wrapper dark-bg dark-border-color dark-action-hover"
    [class.rotate]="checking"
    (click)="unregisterServiceWorkers()"
    *ngIf="isPwaMode"
  >
    <i class="iconfont iconwinfo-icon-tongbu font-bold !text-red-400"></i>
  </div>

  <div
    *ngIf="isLogin || isPwaMode"
    class="common-show wrapper dark-bg dark-border-color dark-action-hover"
    [class.rotate]="entering"
    (click)="goSystemPage()"
  >
    <i class="iconfont iconchuangjian"></i>
  </div>

  <div
    class="common-show wrapper dark-bg dark-border-color dark-action-hover"
    (click)="collapse()"
    *ngIf="showCollapse"
    nz-tooltip
    [nzTooltipTitle]="collapsed ? $t('_collapse') : $t('_put')"
  >
    <i
      class="iconfont iconweibiaoti25 collapse-icon"
      [class.active]="collapsed"
    ></i>
  </div>

  <div
    nz-tooltip
    [nzTooltipTitle]="isDark ? $t('_closeDark') : $t('_openDark')"
    class="common-show wrapper dark-bg dark-border-color dark-action-hover"
    (click)="toggleMode()"
  >
    <img
      class="iconfont icondark"
      src="assets/img/light.svg"
      *ngIf="isDark; else dark"
    />
    <ng-template #dark>
      <i class="iconfont icondark dark" *ngIf="!isDark"></i>
    </ng-template>
  </div>

  <div
    *ngIf="settings.showLanguage"
    class="common-show wrapper dark-bg dark-border-color dark-action-hover"
    (click)="toggleLocale()"
  >
    <img
      class="iconfont"
      src="assets/img/china.svg"
      *ngIf="language === 'zh-CN'; else en"
    />
    <ng-template #en>
      <img class="iconfont" src="assets/img/ua.svg" />
    </ng-template>
  </div>

  <div
    class="wrapper scrolltop dark-bg dark-border-color dark-action-hover"
    (click)="goTop()"
    [class.showTop]="isShowTop || open"
    *ngIf="showTop"
  >
    <i class="iconfont iconjiantouarrow483 arrow !text-green-600"></i>
  </div>

  <div
    class="wrapper dark-bg dark-border-color dark-action-hover"
    (click)="handleOpen()"
    *ngIf="isShowFace"
  >
    <i
      class="iconfont font-bold !text-orange-400 text-xs"
      [class.iconxiaolian]="open"
      [class.iconxiaolian-02]="!open"
    ></i>
  </div>
</div>
